<template>
	<m-layout class="order" title="售后订单" gap="0 24">
		<view class="" slot="header" style="padding: 0 0 10rpx 24rpx;">
			<m-tabs v-model="state" lineHeight="5rpx" height="50rpx" :tabs="tabList"  color="#333"
				activeColor="var(--theme)" pillsColor="var(--theme)" lineColor="var(--theme)"
				pillsBorderRadius="26rpx" />
		</view>
		<template v-for="(item,index) in listArr">
			<m-block class="li" gap="24" spa="20 0 0" :key="index">
				<view class="" @click="orderDetail(item)">
					<view class="status flex-between">
						<view class="">
							<template v-if="item.picurlList.length <=1">
								<m-text ftsize="26" color="#333">订单状态</m-text>
							</template>
							<template v-else>
								<!-- 合并订单 -->
								<m-text ftsize="26" color="#333">合并订单</m-text>
								<!-- <m-text ftsize="26" color="#333" :text="item.orderName"></m-text> -->
							</template>
							<m-tag spa="0 0 0 15" bgColor="#ff0004" bordercolor="#ff0004" hollow
								v-if="tabList[item.isaftersell]">{{tabList[item.isaftersell]}}</m-tag>
						</view>
						<m-text ftsize="26" color="var(--theme)">{{orderState[item.state ]}}</m-text>
					</view>
				
					<view class="goods-card flex-between">
						<template v-if="item.picurLength <= 1">
							<view class="left">
								<m-image wh="148" :src="item.picurl" radius="15"></m-image>
							</view>
							<view class="center">
								<view class="title otp2">
									<text>{{item.orderName}}</text>
								</view>
								<view class="guige otp2">
									<text>{{item.attrname || item.sketch}}</text>
								</view>
							</view>
							<view class="right">
								<m-number :cny="item.wards != 4"  unit="积分" size="28 24" weight="700" :value="item.totalCny"></m-number>
								<text class="block">x{{item.buycountTotal}}</text>
							</view>
						</template>
						<template v-else>
							<view class="imagArr">
								<template v-for="(item2,idx2) in item.picurlList">
									<m-image wh="148" :src="item2" radius="15" :key="idx2"
										spa="0 15 0 0"></m-image>
								</template>
							</view>
						</template>
					</view>
				</view>
				<!-- <view class="price flex-between" v-if="item.totalamount > 0">
					<m-text ftsize="26" gap="10 0 0 ">商品总价</m-text>
					<m-number leftText="￥" :value="item.totalamount" size="28 24" color="#333" weight="700"></m-number>
				</view> -->
				<view class="price flex-between" v-if="item.feejf>0">
					<text>商品总价</text>
					<m-number :value="item.feejf" size="28 24" weight="700" :unit="Coin[item.feecoinid]"></m-number>
				</view>
				<!-- <view class="flex-between ">
					<m-text ftsize="26" gap="10 0 0 ">商品总价</m-text>
					<m-number leftText="￥" :value="item.totalAmount" size="28 18" color="#333"></m-number>
				</view> -->
				<view class="price flex-between " v-if="item.yf>0">
					<m-text ftsize="26">运费</m-text>
					<m-number unit="积分" :value="item.yf" size="28 24" color="#333" weight="700"></m-number>
				</view>
				<!-- <view class="price flex-between">
					<m-text ftsize="26" gap="10 0 0 ">订单金额</m-text>
					<m-number leftText="￥" :value="item.totalAmount+item.yf" size="32 18"></m-number>
				</view> -->
				
				<!-- <view class="order-state flex-between" v-if="item.state==3 && item.morder <1"
					@click="doCopy(item.expCode)">
					<view class="flex">
						<m-icon type="icon-wuliu" wh="36"></m-icon>
						<text class="state">已发货</text>
						<text class="otw">快递编号为：{{item.expCode}}</text>
					</view>
					<m-icon type="icon-fuzhi" wh="28"></m-icon>
				</view> -->
			</m-block>
		</template>
		<m-loading title="未查询到订单" :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
		<m-dialog v-model="cencalShow" :showCancel="true" @handleCancel="cencalShow = false" title="确定取消订单吗？"
			@handleConfirm="CancellOrderFn">
			<view class="cencal-pupop flex-between" style="padding: 0 24rpx;">
				<text class="error">*</text>
				<input type="text" v-model="cancelReasonNo" placeholder="请输入取消原因" placeholder-class="placeholder-class">
			</view>
		</m-dialog>
		<!-- 确认收货  取消订单 -->
		<m-dialog v-model="receivingShow" :showCancel="true" @handleCancel="receivingShow = false" title="提示"
			@handleConfirm="SignIn">
			<view class="dialog-box">
				{{showTyep==1?'请确认物品已安全到达您的手中':'确定删除全部吗'}}
			</view>
		</m-dialog>
	</m-layout>
</template>

<script>
	import { GetOrderPage, SignIn, SetAddr, CancellOrder } from '@/api/Order.js'
	export default {
		data() {
			return {
				state: 1,
				tabList: {
					1: "售后中",
					2: "售后完成",
					4: "售后驳回",
				},
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: false,

				signinInfo: {}, // 确认收货对象
				cancelItem: {}, // 取消订单对象
				cancelReasonNo: '', // 取消理由
				cencalShow: false, // 取消订单弹框
				receivingShow: false, // 确认收货弹框
				// add
				showTyep: 1,
			};
		},
		computed: {
			orderState() {
				const state = this.$store.state.general.enum;
				return state['OrderState']
			},
			Coin() {
				try {
					return this.$store.state.general.enum["Coin"]
				} catch (e) {
					return {}
					//TODO handle the exception
				}

			},
		},
		watch: {
			state(newValue, oldValue) {
				this.reset()
			}
		},
		onLoad() {
			this.reset()
		},
		methods: {
			orderDetail(item) {
				if (item.picurlList.length <= 1) {
					this.Jump('/pagesA/order/detail/detail?orderId=' + item.id)
				} else {
					this.Jump('/pagesA/order/moreOrder/moreOrder?orderId=' + item.id)
				}
			},
			// 取消订单
			async CancellOrderFn() {
				if (!this.cancelReasonNo) {
					return this.Toast('请输入取消理由')
				}
				const { success, msg, data } = await CancellOrder({
					orderid: this.cancelItem.id,
					// cancelReasonNo: this.cancelReasonNo,
				})
				this.Toast(msg)
				if (success) {
					this.Toast('操作成功')
					this.cancelItem = {};
					this.cancelReasonNo = '';
					this.cencalShow = false;
					this.reset();
				}
			},
			// 签收
			async SignIn() {
				const { success, msg } = await SignIn({
					id: this.signinInfo['id']
				})
				this.Toast(msg)
				this.receivingShow = false;
				if (success) {
					this.signinInfo = {};
					this.reset();
				}
			},

			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.listArr = [];
				this.getData();
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { success, list, pageCount } = await GetOrderPage({
					isafterSell: this.state,
					pageIndex: this.pageIndex,
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			// this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.order {
		/deep/ .small-tab {
			padding: 10rpx 24rpx;

			.tab-box {
				text {
					font-size: 28rpx !important;
				}
			}
		}
	}

	.li {
		.status {
			padding-bottom: 28rpx;

			text:nth-of-type(1) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			text:nth-of-type(2) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: var(--theme);
			}
		}

		.goods-card {
			align-items: flex-start;

			.left {}

			.center {
				flex: 1;
				overflow: hidden;
				padding: 0 30rpx;

				.title {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.guige {
					padding-top: 16rpx;

					text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.right {
				text-align: right;

				.block {
					padding-top: 10rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}

		.price {
			padding-top: 10rpx;
			text:nth-of-type(1) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.order-state {
			margin-top: 20rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
			padding: 10rpx 30rpx;

			.state {
				padding: 0 15rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.otw {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.btn-box {
			.m-button {
				margin-top: 25rpx;
				margin-left: 20rpx;
			}
		}
	}

	.cencal-pupop {
		padding: 50rpx 0;

		input {
			flex: 1;
			margin-left: 10rpx;
			padding: 15rpx 35rpx;
			background: #F6F6F6;
			border-radius: 100px 100px 100px 100px;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}

		.placeholder-class {
			font-size: 30rpx;
			color: #CCCCCC;
		}
	}

	.hint-pupop {
		text-align: center;
		padding: 24rpx;
	}
</style>